<template>
  <view class="page">
    <!-- 顶部栏 -->
    <view class="topbar">
      <text class="title">孜然卷工具</text>
      <view class="avatar" />
    </view>

    <!-- 搜索框 -->
    <view class="search">
      <text class="icon">🔎</text>
      <input class="search-input" type="text" :value="keyword" @input="onInput" placeholder="搜索工具（如：二维码、计时器）" placeholder-class="ph" confirm-type="search" />
    </view>

    <!-- 常用工具区域 -->
    <view class="section-title">常用工具</view>
    <view class="grid">
      <view v-for="item in toolsByCategory['常用工具']" :key="item.id" class="tool" @tap.stop="openSheet(item)" @click.stop="openSheet(item)" :aria-label="item.name">
        <view class="tool-box">
          <view class="icon-box">{{ item.icon }}</view>
          <text class="name">{{ item.name }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 娱乐功能区域 -->
    <view class="section-title">娱乐</view>
    <view class="grid">
      <view v-for="item in toolsByCategory['娱乐']" :key="item.id" class="tool" @tap.stop="openSheet(item)" @click.stop="openSheet(item)" :aria-label="item.name">
        <view class="tool-box">
          <view class="icon-box">{{ item.icon }}</view>
          <text class="name">{{ item.name }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 产品演示区域 -->
    <view class="section-title">产品演示</view>
    <view class="demo-entry-section">
      <!-- 使用uni-app标准导航方式 -->
      <view class="demo-entry" @tap="navigateToDemo" @click="navigateToDemo">
        <view class="demo-icon">📱</view>
        <view class="demo-info">
          <text class="demo-name">个人助手</text>
          <text class="demo-desc">一站式效率管理解决方案</text>
        </view>
        <view class="demo-arrow">→</view>
      </view>
    </view>

    

    <!-- 详情抽屉 -->
    <view class="mask" :class="{ show: showSheet }" @tap="closeSheet" />
    <view class="sheet" :class="{ show: showSheet }" :style="{ transform: showSheet ? 'translateY(0)' : 'translateY(110%)' }" @touchmove.stop>
      <view class="grabber" />
      <view class="sheet-header">
        <button class="btn" @tap="closeSheet">返回</button>
        <text class="sheet-title">{{ current.name || '工具详情' }}</text>
        <button class="btn primary" @tap="actionOpen">打开</button>
      </view>
      <view class="sheet-body">
        <view class="info">
          <view class="card">
            <text class="label">用途</text>
            <text class="value">{{ current.use || '-' }}</text>
          </view>
          <view class="card">
            <text class="label">常用度</text>
            <text class="value">{{ current.rate || '-' }}</text>
          </view>
        </view>
        <view class="actions">
          <button class="btn" @tap="fav">收藏</button>
          <!-- #ifdef MP-WEIXIN -->
          <button class="btn" open-type="share">分享</button>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <button class="btn" @tap="share">分享</button>
          <!-- #endif -->
        </view>
        <view class="tool-component">
          <QrcodeGenerator v-if="currentId==='qrcode'" />
          <CountdownTimer v-else-if="currentId==='timer'" />
          <UnitConverter v-else-if="currentId==='unit'" />
          <OcrPlaceholder v-else-if="currentId==='ocr'" />
          <CalcScientific v-else-if="currentId==='calc'" />
          <CurrencyConverter v-else-if="currentId==='currency'" />
          <view v-else-if="currentId==='dice'">
            <!-- #ifdef H5 -->
            <DiceRoller3D />
            <!-- #endif -->
            <!-- #ifndef H5 -->
            <DiceRoller :autoRollKey="diceRollKey" />
            <!-- #endif -->
          </view>
          <view v-else-if="currentId==='demo'">
            <view class="demo-prompt">
              <text class="demo-title">个人成长助手演示系统</text>
              <text class="demo-desc">点击下方按钮体验完整流程</text>
              <button class="btn primary" @tap="navigateToDemo">进入演示系统</button>
            </view>
          </view>
        </view>
        <text v-if="!currentId" class="empty-hint">原型演示：点击卡片打开抽屉，体验交互流程。</text>
      </view>
    </view>
  </view>
  
</template>

<script>
import QrcodeGenerator from '@/components/tools/QrcodeGenerator.vue'
import CountdownTimer from '@/components/tools/CountdownTimer.vue'
import UnitConverter from '@/components/tools/UnitConverter.vue'
import OcrPlaceholder from '@/components/tools/OcrPlaceholder.vue'
import CalcScientific from '@/components/tools/CalcScientific.vue'
import CurrencyConverter from '@/components/tools/CurrencyConverter.vue'
/* #ifdef H5 */
import DiceRoller3D from '@/components/tools/DiceRoller3D.vue'
/* #endif */
/* #ifndef H5 */
import DiceRoller from '@/components/tools/DiceRoller.vue'
/* #endif */

export default {
  data() {
    return {
      keyword: '',
      showSheet: false,
      current: {},
      currentId: '',
      diceRollKey: 0,
      toolsByCategory: {
        '常用工具': [
          { id: 'qrcode', name: '二维码生成', desc: '文本/链接转二维码', icon: '🔳', use: '快速分享链接与信息', rate: '★★★★★' },
          { id: 'timer', name: '倒计时', desc: '提醒/打卡', icon: '⏳', use: '时间管理与专注', rate: '★★★★☆' },
          { id: 'unit', name: '单位换算', desc: '长度/面积/温度', icon: '⚖️', use: '通用单位换算', rate: '★★★★☆' },
          { id: 'ocr', name: '图片取字', desc: 'OCR 识别', icon: '🖼️', use: '图片文字快速提取', rate: '★★★☆☆' },
          { id: 'calc', name: '科学计算', desc: '表达式/存储', icon: '🧮', use: '复杂计算与复用', rate: '★★★★☆' },
          { id: 'currency', name: '汇率换算', desc: '实时牌价', icon: '💱', use: '差旅/跨境支付', rate: '★★★☆☆' }
        ],
        '娱乐': [
          { id: 'dice', name: '摇骰子', desc: '随机 1-6 点', icon: '🎲', use: '娱乐/决定小事', rate: '★★★☆☆' }
        ],
        '产品演示': [
          { id: 'demo', name: '个人成长助手', desc: '效率管理演示系统', icon: '📈', use: '展示小程序开发能力', rate: '★★★★★' }
        ]
      },
      toolsPrimary: [
        { id: 'qrcode', name: '二维码生成', desc: '文本/链接转二维码', icon: '🔳', use: '快速分享链接与信息', rate: '★★★★★' },
        { id: 'timer', name: '倒计时', desc: '提醒/打卡', icon: '⏳', use: '时间管理与专注', rate: '★★★★☆' },
        { id: 'unit', name: '单位换算', desc: '长度/面积/温度', icon: '⚖️', use: '通用单位换算', rate: '★★★★☆' },
        { id: 'ocr', name: '图片取字', desc: 'OCR 识别', icon: '🖼️', use: '图片文字快速提取', rate: '★★★☆☆' },
        { id: 'calc', name: '科学计算', desc: '表达式/存储', icon: '🧮', use: '复杂计算与复用', rate: '★★★★☆' },
        { id: 'currency', name: '汇率换算', desc: '实时牌价', icon: '💱', use: '差旅/跨境支付', rate: '★★★☆☆' },
        { id: 'dice', name: '摇骰子', desc: '随机 1-6 点', icon: '🎲', use: '娱乐/决定小事', rate: '★★★☆☆' },
        { id: 'demo', name: '个人成长助手', desc: '效率管理演示系统', icon: '📈', use: '展示小程序开发能力', rate: '★★★★★' }
      ],
      toolsSecondary: [],
    }
  },
  onLoad() {
    // 仅小程序端显示转发菜单
    // #ifdef MP-WEIXIN
    wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] })
    // #endif
  },
  // #ifdef MP-WEIXIN
  onShareAppMessage() {
    const title = this.current.name ? `孜然卷工具：${this.current.name}` : '孜然卷工具'
    return {
      title,
      path: '/pages/index/index',
      imageUrl: '/static/logo.png',
    }
  },
  onShareTimeline() {
    const title = this.current.name ? `孜然卷工具：${this.current.name}` : '孜然卷工具'
    return { title, query: '' }
  },
  // #endif
  computed: {
    // 移除不兼容的动态组件，保留空对象占位以防模板访问报错
    filteredPrimary() {
      const kw = this.keyword.trim();
      if (!kw) return this.toolsPrimary;
      return this.toolsPrimary.filter(t => `${t.name}${t.desc}${t.use}`.includes(kw));
    },
    filteredSecondary() {
      const kw = this.keyword.trim();
      if (!kw) return this.toolsSecondary;
      return this.toolsSecondary.filter(t => `${t.name}${t.desc}${t.use}`.includes(kw));
    },
  },
  methods: {
    onInput(e) {
      this.keyword = e.detail.value;
    },
    openSheet(meta) {
      this.current = meta;
      this.currentId = meta.id;
      this.showSheet = true;
    },
    closeSheet() {
      this.showSheet = false;
    },
    actionOpen() {
      uni.showToast({ title: `进入「${this.current.name || ''}」`, icon: 'none' });
      if (this.currentId === 'dice') {
        // 触发子组件自动摇一次
        this.diceRollKey++
      } else if (this.currentId === 'demo') {
        this.navigateToDemo();
      }
    },
    navigateToDemo() {
      console.log('navigateToDemo方法被调用');
      console.log('当前环境:', process.env.UNI_PLATFORM);
      
      // 只使用uni.navigateTo进行页面跳转
      // 进一步优化错误处理逻辑，避免显示错误提示
      uni.navigateTo({
        url: '/pages/demo/index',
        success: () => {
          console.log('navigateTo成功');
        },
        fail: (err) => {
          console.log('页面跳转状态:', err);
          // 完全移除失败提示，避免影响用户体验
        }
      });
    },
    // 已弃用的跳转方法，现在统一使用navigateToDemo
    directToDemo() {
      console.log('directToDemo方法被调用');
      // 显示提示信息并调用标准的navigateToDemo方法
      uni.showToast({
        title: '正在进入个人助手...',
        icon: 'none',
        duration: 2000
      });
      
      // 调用标准的navigateToDemo方法
      setTimeout(() => {
        this.navigateToDemo();
      }, 500);
    },
    fav() {
      uni.showToast({ title: '已收藏（原型）', icon: 'none' });
    },
    share() {
      uni.showToast({ title: '已复制分享链接（原型）', icon: 'none' });
    },
  },
  /* #ifdef H5 */
  components: { QrcodeGenerator, CountdownTimer, UnitConverter, OcrPlaceholder, CalcScientific, CurrencyConverter, DiceRoller3D },
  /* #endif */
  /* #ifndef H5 */
  components: { QrcodeGenerator, CountdownTimer, UnitConverter, OcrPlaceholder, CalcScientific, CurrencyConverter, DiceRoller },
  /* #endif */
}
</script>

<style>
.page {
  min-height: 100vh;
  background: radial-gradient(800rpx 800rpx at 10% 0%, #20265f 0%, #0f1226 40%, #0f1226 100%);
  color: #e9ecff;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48rpx 28rpx 16rpx 28rpx;
}
.title {
  font-weight: 700;
  font-size: 32rpx;
}
.avatar {
  width: 40rpx; height: 40rpx; border-radius: 50%;
  background: #3a3f77;
  border: 2rpx solid rgba(255,255,255,.12);
}
.search {
  position: relative;
  padding: 0 28rpx 16rpx 28rpx;
}
.icon { position: absolute; left: 44rpx; top: 14rpx; opacity: .65; font-size: 24rpx; }
.search-input {
  height: 64rpx; border-radius: 24rpx;
  border: 2rpx solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
  color: #e9ecff; padding: 0 24rpx 0 64rpx; font-size: 26rpx;
}
.ph { color: #a7b0d9; }

.section-title { padding: 8rpx 28rpx 0 28rpx; font-size: 24rpx; color: #a7b0d9; }
.grid {
  display: flex; flex-wrap: wrap; padding: 12rpx 20rpx 20rpx 20rpx;
}
.tool {
  width: 33.3333%;
  box-sizing: border-box;
  padding: 0 8rpx 16rpx 8rpx;
}
.tool-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 200rpx; border-radius: 28rpx;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 2rpx solid rgba(255,255,255,.08);
  box-shadow: 0 12rpx 32rpx rgba(0,0,0,.18);
}
.icon-box {
  width: 72rpx; height: 72rpx; border-radius: 16rpx;
  display: flex; align-items: center; justify-content: center;
  background: #1e224e;
  border: 2rpx solid rgba(255,255,255,.1);
  margin-bottom: 12rpx; font-size: 36rpx;
}
.name { font-size: 24rpx; font-weight: 600; }
.desc { font-size: 20rpx; color: #a7b0d9; margin-top: 4rpx; }

/* 已移除底部导航 */
    
    /* 产品演示入口样式 */
    .demo-entry-section {
      padding: 12rpx 20rpx 20rpx 20rpx;
    }
    .demo-entry {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 160rpx;
      border-radius: 28rpx;
      background: linear-gradient(135deg, #6c8cff, #5a6dff);
      border: 2rpx solid rgba(255,255,255,.1);
      box-shadow: 0 12rpx 32rpx rgba(0,0,0,.2);
      padding: 0 32rpx;
    }
    .demo-icon {
      font-size: 64rpx;
    }
    .demo-info {
      flex: 1;
      margin-left: 24rpx;
    }
    .demo-name {
      font-size: 32rpx;
      font-weight: 700;
      color: #ffffff;
    }
    .demo-desc {
      font-size: 24rpx;
      color: rgba(255,255,255,.8);
      margin-top: 8rpx;
      display: block;
    }
    .demo-arrow {
      font-size: 32rpx;
      color: rgba(255,255,255,.8);
    }  

     .mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 998; }
.mask.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; height: 66vh;
  background: linear-gradient(180deg, rgba(36,42,96,.98), rgba(17,19,48,.98));
  border-top-left-radius: 28rpx; border-top-right-radius: 28rpx;
  border: 2rpx solid rgba(255,255,255,.08);
  box-shadow: 0 -32rpx 56rpx rgba(0,0,0,.35);
  transform: translateY(110%);
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
  z-index: 999;
}
.sheet.show { transform: translateY(0); }
.grabber { width: 88rpx; height: 8rpx; border-radius: 4rpx; background: rgba(255,255,255,.22); margin: 16rpx auto; }
.sheet-header { display: grid; grid-template-columns: 120rpx 1fr 120rpx; align-items: center; padding: 0 24rpx 12rpx 24rpx; }
.sheet-title { text-align: center; font-weight: 700; font-size: 28rpx; }
.btn { height: 60rpx; border-radius: 20rpx; border: 2rpx solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #e9ecff; font-size: 24rpx; }
.btn.primary { background: linear-gradient(135deg, #6c8cff, #5a6dff); border-color: rgba(0,0,0,.2); }
.sheet-body { padding: 0 28rpx 28rpx 28rpx; max-height: calc(66vh - 88rpx); overflow-y: auto; }
.info { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; margin-top: 12rpx; }
.card { background: rgba(255,255,255,.05); border: 2rpx solid rgba(255,255,255,.08); border-radius: 24rpx; padding: 20rpx; }
.label { color: #a7b0d9; font-size: 22rpx; }
.value { margin-top: 8rpx; font-weight: 600; font-size: 26rpx; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20rpx; margin-top: 20rpx; }
.empty-hint { color: #a7b0d9; text-align: center; margin-top: 28rpx; font-size: 22rpx; }
.tool-component { margin-top: 24rpx; }
      .demo-prompt {
        text-align: center;
        padding: 40rpx 20rpx;
      }
      .demo-title {
        font-size: 32rpx;
        font-weight: 700;
        margin-bottom: 16rpx;
        display: block;
      }
      .demo-desc {
        font-size: 24rpx;
        color: #a7b0d9;
        margin-bottom: 32rpx;
        display: block;
      }
</style>
